let path = require("path");
let webpack = require("webpack");
let ExtractTextPlugin = require("extract-text-webpack-plugin");
let HtmlWebpackPlugin = require("html-webpack-plugin");
let fs = require("fs");

//检索所有的静态页面的脚本
let fpath = "./src/js/entry";
let files = fs.readdirSync(fpath);
let newEntries = {};
let arrEntries = [];
files.forEach(function(f) {
  f = f.replace(".js", "");
  newEntries[f] = fpath + "/" + f;
  arrEntries.push(f);
});
console.log(newEntries);
console.log(arrEntries);

const extractSass = new ExtractTextPlugin({
  filename: "[name].[contenthash].css"
});

let webpackConfig = {
  // 配置入口文件，有几个写几个
  entry: newEntries,
  output: {
    path: path.join(__dirname, "app"), // 输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它
    publicPath: "/app", // 模板、样式、脚本、图片等资源对应的server上的路径
    filename: "js/[name].js", // 每个页面对应的主js的生成配置
    chunkFilename: "js/[id].chunk.js" // chunk生成的配置
  },
  resolve: {
    alias: {
      'vue': 'vue/dist/vue.js'
    }
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/, //一个匹配loaders所处理的文件的拓展名的正则表达式
        exclude: /(node_modules|bower_components)/,
        use: [
          //使用到的loader及其配置
          {
            loader: "babel-loader", //使用的加载器名称，-loader后缀不能省略；也可通过?query设置参数
            options: {
              //为当前loader设置的参数,对于babel可以提取出单独放在.babelrc文件中;
              presets: ["es2015"]
            }
          }
        ]
      },
      {
        test: /\.less/,
        exclude: /(node_modules)/, //手动添加必须处理(include)或屏蔽不需要处理的文件（文件夹）
        use: ExtractTextPlugin.extract([
          {
            loader: "css-loader",
            options: {
              minimize: true,
              "-autoprefixer": true
            }
          },
          {
            loader: "postcss-loader",
            options: {
              plugins: () => [require("autoprefixer")]
            }
          },
          {
            loader: "less-loader"
          }
        ])
      },
      {
        test: /\.(png|gif|jpg|svg)$/,
        use: "url-loader?limit=20480&name=assets/[name]-[hash].[ext]"
      }
    ]
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: "vendors", // 将公共模块提取，生成名为`vendors`的chunk
      chunks: arrEntries, // 提取哪些模块共有的部分
      minChunks: 3 // 提取至少3个模块共有的部分
    }),
    new ExtractTextPlugin("./css/[name].css") // 单独使用link标签加载css并设置路径，相对于output配置中的publickPath
    // new webpack.HotModuleReplacementPlugin() // 热加载
  ],
  // 使用webpack-dev-server，提高开发效率
  devServer: {
    contentBase: "./",
    host: "localhost",
    port: 8888,
    inline: true,
    hot: true
  },
};

//检索所有的静态页面
let htmlpath = "./page";
let htmls = fs.readdirSync(htmlpath);
let newhtmls = [];
htmls.forEach(function(f) {
  newhtmls.push({
    src: htmlpath + "/" + f,
    app: "./" + f,
    script: f.replace(".html", "")
  });
});

// console.log(newhtmls)
newhtmls.forEach(function(one, index) {
  webpackConfig.plugins.push(
    new HtmlWebpackPlugin({
      filename: one["app"], // 生成的html存放路径，相对于path
      template: one["src"], // html模板路径
      inject: "body", // js插入的位置，true/'head'/'body'/false
      hash: true, // 为静态资源生成hash值
      chunks: ["vendors", one["script"]], // 需要引入的chunk，不配置就会引入所有页面的资源
      minify: {
        removeComments: true, // 移除HTML中的注释
        collapseWhitespace: false // 删除空白符与换行符
      }
    })
  );
});
module.exports = webpackConfig;
